<template>
    <view v-for="(item, index) in selectTabList" :key="index"
          :class="`card`" @click="tabItem(item)">
        <div :value="item.value" icon="none">
            <div class="p-3px m-w-max-content">
                <SvgIcon :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                <div class="label-text">{{ item.label }}</div>
            </div>
        </div>
    </view>

    <t-popup v-model="showColor" placement="bottom" class="pop" :style="{height:'400px',borderTop:'1px solid #ddd'}"
             destroy-on-close
             :showOverlay="false">
        <div>
            <div class="block">
                背景
            </div>
            <div class="font-box" v-if="editTab==='font'">
                <div>
                    <div class="p-10px">
                        <t-search
                                v-model="fontSearchKeyword"
                                placeholder="输入字体名称搜索"
                                @submit="onSearchFont"
                                @action-click="onSearchFont"
                                size="mini"
                        >
                            <template #action>
                                <t-button theme="primary">搜索</t-button>
                            </template>
                        </t-search>
                    </div>
                    <div class="van-list fonts">
                        <div class="font" v-for="(item,index) in fontList"
                             :key="index"
                             :class="{'active':fontFamily.modelValue === item.name}"
                             @click="changeFontFamily(item,index)">
                            <img :src="item.preview" :alt="item.name" style="color:#000;">
                            <div class="loaded" v-show="!item.loaded">
                                <t-icon name="cloud-download" class=" "></t-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t-popup>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {useActiveObjectModel} from "@/views/Editor/hooks/useActiveObjectModel";
import {useFontStore} from "@/store";
import FontFaceObserver from "fontfaceobserver";
import {Toast} from "tdesign-mobile-vue";
import {useEditor} from "@/views/Editor/app";
import {parseStrokeOrFill} from "@/views/Editor/utils/jsonParse";

const {editor, keybinding} = useEditor()
const {fontList, skipLoadFonts} = storeToRefs(useFontStore())
const selectTabList = [
    {label: '背景图库', value: 'edit', svgIcon: 'iconfont-color-text', svgSize: 24},
    {label: '移除背景', value: 'edit', svgIcon: 'iconfont-color-text', svgSize: 24},
]
const product = {
    value: 'all',
    options: [
        {
            value: 'all',
            label: '全部产品',
        },
        {
            value: 'new',
            label: '最新产品',
        },
        {
            value: 'hot',
            label: '最火产品',
        },
    ],
};
const text = useActiveObjectModel('text')
const fill = useActiveObjectModel('fill')
const fontFamily = useActiveObjectModel('fontFamily')
const fontSize = useActiveObjectModel('fontSize') // 字号
const textWrap = useActiveObjectModel('textWrap') // 文本换行规则
const lineHeight = useActiveObjectModel('lineHeight') // 行号
const letterSpacing = useActiveObjectModel('letterSpacing') // 字距
const textAlign = useActiveObjectModel('textAlign')
const verticalAlign = useActiveObjectModel('verticalAlign')
const italic = useActiveObjectModel('italic') // 文字是否倾斜
const textDecoration = useActiveObjectModel('textDecoration')
const textOverflow = useActiveObjectModel('textOverflow')
const fontWeight = useActiveObjectModel('fontWeight')
const colorList = [
    {label: '透明', value: 'transparent',style: {}},
    {label: '', value: '#ffffff',style:{border: '1px solid #d3d3d3'}},
    {label: '', value: '#dfc672',style: {}},
    {label: '', value: 'rgb(0,22,255)',style: {}},
    {label: '', value: 'rgb(170,1,255)',style: {}},
    {label: '', value: 'rgb(0,133,255)',style: {}},
    {label: '', value: 'rgb(240,2,255)',style: {}},
    {label: '', value: 'rgb(125,255,0)',style: {}},
    {label: '', value: 'rgb(255,64,1)',style: {}},
    {label: '', value: 'yellow'},
];

const weightOptions = [
    {
        value: 'thin',
        label: '极细',
    },
    {
        value: 'extra-light',
        label: '特细',
    },
    {
        value: 'light',
        label: '细',
    },
    {
        value: 'normal',
        label: '正常',
    },
    {
        value: 'medium',
        label: '中等',
    },
    {
        value: 'semi-bold',
        label: '半粗',
    },
    {
        value: 'bold',
        label: '粗',
    },
    {
        value: 'extra-bold',
        label: '特粗',
    },
    {
        value: 'black',
        label: '极粗',
    },
]
const showColor = ref(false)
const editTab = ref('text')
const fontSearchKeyword = ref('')
const fillArray = ref([])
watchEffect(() => {
    if (fill.value.modelValue) {
        fillArray.value = parseStrokeOrFill(fill.value.modelValue)
    } else {
        fillArray.value = []
    }
})
const refreshFill = () => {
    fill.value.onChange([])
    fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value)
}
const addFill = (color:string) => {
    fillArray.value.push({
        type: 'solid',
        color: color,
    })
    refreshFill()
}
const removeFill = (index) => {
    fillArray.value.splice(index, 1)
    refreshFill()
}
const tabItem = (item: any) => {
    if (item.value === 'edit') {
        showColor.value = true
    }
}
const onSearchFont = () => {
    // TODO 搜索字体
    console.log('fontSearchKeyword.value=', fontSearchKeyword.value)
}
const onSearchFontActionClick = () => {
    // TODO 搜索字体
    console.log('fontSearchKeyword.value=', fontSearchKeyword.value)
}


const changeFontFamily = (record: any, index) => {
    const fontFamilyName = record.name
    // if (skipLoadFonts.value.includes(fontFamilyName)){
    //     return;
    // }else {
    // 字体加载
    Toast({
        theme: 'loading',
        message: `正在加载字体 【${fontFamilyName}】`,
        onClose: () => {
            console.log('onClose');
        },
        onDestroy: () => {
            console.log('onDestroy');
        },
    });
    // const loading =  Message.loading({
    //     content:`正在加载字体 【${fontFamilyName}】`,
    //     duration:0
    // })
    const font = new FontFaceObserver(fontFamilyName);
    font
        .load(null, 150000)
        .then(() => {
            fontList.value[index]['loaded'] = true
            fontFamily.value.onChange(fontFamilyName);
            Toast.clear();
            // loading.close()
            editor.activeObject.value?.forceUpdate()
        })
        .catch((err) => {
            console.log(err);
            // Toast.clear();
            Toast({
                theme: 'error',
                direction: 'column',
                duration: 3000,
                message: `加载字体【${fontFamilyName}】失败`,
            })
        });
    // }
}
const changeTextDecoration = (value) => {
    if (textDecoration.value.modelValue === value) {
        value = 'none'
    }
    textDecoration.value.onChange(value)
}
</script>

<style lang="less">
@boxHeight: 345px;
.text-box,color-box, .font-box {
  //height: 70px;
  margin: 3px 0;
  //overflow-y: hidden;
  //overflow-x: auto;
  overflow-y: auto;
  height: @boxHeight;
}

.color-list-box {
  margin: 5px 0;
  overflow-y: hidden;
  overflow-x: auto;
  padding-bottom: 6px;
  //overflow-y: auto;
  //height: @boxHeight;

  .card {
    display: inline-block;
    //float: left;
    //position: relative;
    margin-top: 5px;
    border-radius: 6px;
    //overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    max-width: 40px;
    min-width: 40px;

    .t-radio__border {
      height: 0 !important;
    }

    .t-radio__title {
      width: 100%;
    }
  }

  .card--active {
    //border-color: #0052d9;
  }

  .card--active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border: 14px solid #0052d9;
    border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 6px));
    border-bottom-color: transparent;
    border-right-color: transparent;
  }

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }

  /* 横向布局 */

  .horizontal-box {
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    //margin: 16px;
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card {
    flex: 1;
    margin-left: 12px;
  }

  .horizontal-box .card + .card {
    margin-left: 12px;
  }

  .t-avatar__wrapper {
    border-radius: 50px;
  }

  .t-avatar {
    background-color: transparent;
    width: 40px;
    height: 40px;
  }
}
.color-list-box-break {
  margin: 3px 0;
  //overflow-y: hidden;
  //overflow-x: auto;
  overflow-y: auto;
  height: @boxHeight;

  .card {
    display: inline-block;
    //float: left;
    //position: relative;
    margin-top: 5px;
    border-radius: 6px;
    //overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    max-width: 40px;
    min-width: 40px;

    .t-radio__border {
      height: 0 !important;
    }

    .t-radio__title {
      width: 100%;
    }
  }

  .card--active {
    //border-color: #0052d9;
  }

  .card--active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border: 14px solid #0052d9;
    border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 6px));
    border-bottom-color: transparent;
    border-right-color: transparent;
  }

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }

  /* 横向布局 */

  .horizontal-box {
    //width: calc(100% - 32px);
    //display: flex;
    //align-items: center;
    //margin: 16px;
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card {
    flex: 1;
    margin-left: 12px;
  }

  .horizontal-box .card + .card {
    margin-left: 12px;
  }

  .t-avatar__wrapper {
    border-radius: 50px;
  }

  .t-avatar {
    background-color: transparent;
    width: 40px;
    height: 40px;
  }
}

.transparent-bg {
  background: var(--td-text-color-anti);
  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}


.fonts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-y: auto;
  padding: 5px;
}

.fonts .font {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  background-color: #f4f4f4;
  border: 1px transparent solid;
  width: 21%;
  height: calc(400px * .21);
  margin: 0 2% 5px;
  border-radius: 5px
}

.fonts .font .loading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 244, 244, .95)
}

.fonts .font .loaded {
  position: absolute;
  bottom: .3125rem;
  right: .3125rem
}

.fonts .font img {
  max-height: 90%;
  max-width: 80%
}

.fonts .active {
  border-color: var(--themeColor)
}

.toolbar-div .flex-box {
  display: flex;
  //background-color: #f8f9fa;
  //border-bottom: 1px solid #dee2e6;
  padding: 5px 16px;
  align-items: center;
  font-size: 20px;
  flex-wrap: wrap;
}

.tag-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.separator {
  width: 1px; /* 分隔线的宽度 */
  height: 20px; /* 分隔线的高度，可以根据实际需求调整 */
  background-color: #dee2e6; /* 分隔线的颜色 */
  margin: 0 10px; /* 左右间距 */
}

.tag-item:not(:last-child)::after {
  content: '';
  width: 1px; /* 分隔线的宽度 */
  height: 20px; /* 分隔线的高度，可以根据实际需求调整 */
  background-color: #dee2e6; /* 分隔线的颜色 */
  margin: 0 10px; /* 左右间距 */
}
.color-bar{
  height: 20px;
  border: 1px solid #d3d3d3;
}
</style>
